<template>
    <div class="main" v-if="store.isExtra">
        <img src="/src/assets/image/箭头.png" class="push" :style="{ right: rightValue + 'px' }" @click="pushNav">
        <div class="extra-nav" :style="{ right: navValue + 'px' }">
            <div class="function" @click="citiesHeight">
                <img src="/src/assets/image/海拔.png">
                <p>城市海拔</p>
            </div>
            <div class="function" @click="citiesGDP">
                <img src="/src/assets/image/海拔.png">
                <p>城市经济</p>
            </div>
            <div class="function" @click="loveCity">
                <img src="/src/assets/image/爱心.png">
                <p>理想城市</p>
            </div>
        </div>
    </div>
    <div class="popup" v-if="store.isMouseClick" :style="{ top: popupTop + 'px', left: popupLeft + 'px' }">
        <div>
            <h4>年份 : <span>{{ store.gdpYear }}</span></h4>
            <h4>城市 : <span>{{ store.gdpCity }}</span></h4>
            <h4>国内生产总值 : <span>{{ store.gdp }}亿元</span></h4>
            <el-button type="warning" @click="close" class="close">关闭</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { mapStore } from '@/stores/counter';
import { extra } from '@/Hooks/extraHook';
const { citiesHeight, citiesGDP, loveCity, popupTop, popupLeft } = extra()
const store = mapStore()
const rightValue = ref(50)
const navValue = ref(-100)
const isPush = ref(false)
const pushNav = () => {
    isPush.value = !isPush.value
    if (isPush.value) {
        rightValue.value = 150
        navValue.value = 50
    } else {
        rightValue.value = 50
        navValue.value = -100
    }
}

const close = () => {
    store.isMouseClick = false
}
</script>

<style scoped lang="scss">
.main {
    position: absolute;
    top: 200px;
    right: 0px;
    width: 300px;
    height: 300px;
    z-index: 1000;

    .push {
        position: absolute;
        top: 50px;
        right: 50px;
        height: 150px;
        width: 100px;
        z-index: 2000;
        transition: right 1s ease;
        cursor: pointer;
    }

    .extra-nav {
        position: absolute;
        top: 0px;
        right: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 100px;
        height: 250px;
        transition: right 1s ease;
        overflow: hidden;

        .function {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }

        img {
            width: 25px;
            height: 25px;
            border: solid 1px #0e76ae;
            border-radius: 10px;
            background: #0e76ae;
            padding: 3px;
        }

        p {
            color: #fff;
            font-size: 12px;
        }
    }
}

.popup {
    padding: 10px;
    width: 250px;
    border: solid 3px rgba(18, 91, 115, 0.934);
    background: #074086cc;
    z-index: 1000;
    position: fixed;

    h4,
    span {
        color: #fff;
        font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    }

    span {
        font-weight: normal;
    }

    .close {
        position: absolute;
        top: 5px;
        right: 5px;
    }
}
</style>
